<template>
    <div-row :obj="obj" class="content-wrapper text-picture">
        <el-row :gutter="obj.gutter">
            <el-col>
                <h1 class="title" v-html="obj.title" :class="obj.animateTitle? 'wow '+obj.animateTitle : ''"/>
                <p class="desc" v-html="obj.desc" :class="obj.animateText? 'wow '+obj.animateText : ''" />
            </el-col>
            <el-col :xs="24" :md="24/obj.columns" v-for="(item,index) in obj.imgTextBox" :key="index">
                <el-row class="team-box" @click="goClick(item.httpUrl)" :class="obj.animateImg? 'wow '+obj.animateImg : ''">
                    <el-col :md="6" class="img image">
                        <img :src="item.imgUrl">
                    </el-col>
                    <el-col :md="18" class="text-box">
                        <h4 class="text-title" v-html="item.title"/>
                        <h5 class="text-desc" v-html="item.desc"/>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </div-row>
</template>
<script>
import animate from '@/mixins/animate'
export default {
    name: 'TwoColumns',
    mixins: [animate]

}
</script>
<style lang="scss" scoped>
    .content-wrapper{
        .title,.desc{
            text-align: center
        }
        .title{
            font-size: 40px;
            color:#666;
            padding: 10px 0;
        }
        .desc{
            color:#bdc3c7;
            font-size: 16px;
            padding: 10px 0;
        }
        .team-box{
            min-height: 180px;
            padding: 15px;
            .image{
                margin: 0 auto;
                overflow: hidden;
                img{
                    max-width: 100%;
                    height: auto;
                    display: block;
                    border-radius: 50% !important;
                }
            }
            .text-box{
                .text-title,.text-desc{
                    text-align: left;
                    overflow: hidden;
                    text-overflow:ellipsis;
                }
                .text-title{
                    color:#666;
                    font-size: 18px;
                    white-space: nowrap;
                    padding: 10px 15px;
                    font-weight: bold;
                }
                .text-desc{
                    color:#bdc3c7;
                    font-size: 15px;
                    display: -webkit-box;
                    -webkit-line-clamp: 5;
                    -webkit-box-orient: vertical;
                    line-height: 24px;
                    min-height: 120px;
                }
            }
        }

    }
</style>

